﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Network | Social Network</title>

    <style>
        body {
            font: 10pt arial;
        }

        #mynetwork {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
            background: #F3F3F3;
        }
    </style>

    <script type="text/javascript" src="Social_files/vis.js"></script>
    <link href="Social_files/vis.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
        var DIR = 'img/soft-scraps-icons/';

        var nodes = null;
        var edges = null;
        var network = null;

        function draw() {
            // create people
            nodes = [
              { id: 1, label: '李云龙' },
              { id: 2, label: '赵刚' },
              { id: 3, label: '田雨' },
              { id: 4, label: '楚云飞' },
              { id: 5, label: '孔捷' },
              { id: 6, label: '和尚'},
              { id: 7, label: '丁伟' },
              { id: 8, label: '段鹏' },
              { id: 9, label: '张大彪' },
              { id: 10, label: '冯楠' }
            ];

            // create connections
            var color = '#BFBFBF';
            edges = [
              { from: 1, to: 2, value: 33, label: 33, color: color },
              { from: 1, to: 3, value: 31, label: 31, color: color },
              { from: 1, to: 4, value: 29, label: 29, color: color },
              { from: 1, to: 5, value: 27, label: 27, color: color },
              { from: 1, to: 6, value: 27, label: 27, color: color },
              { from: 1, to: 7, value: 21, label: 21, color: color },
              { from: 1, to: 8, value: 21, label: 21, color: color },
              { from: 1, to: 9, value: 22, label: 22, color: color },
              { from: 1, to: 10, value: 11, label: 11, color: color },
              { from: 2, to: 3, value: 27, label: 27, color: color },
              { from: 2, to: 4, value: 26, label: 26, color: color },
              { from: 2, to: 5, value: 24, label: 24, color: color },
              { from: 2, to: 6, value: 21, label: 21, color: color },
              { from: 2, to: 7, value: 20, label: 20, color: color },
              { from: 2, to: 8, value: 18, label: 18, color: color },
              { from: 2, to: 9, value: 19, label: 19, color: color },
              { from: 2, to: 10, value: 10, label: 10, color: color },
              { from: 3, to: 4, value: 22, label: 22, color: color },
              { from: 3, to: 5, value: 21, label: 21, color: color },
              { from: 3, to: 6, value: 19, label: 19, color: color },
              { from: 3, to: 7, value: 16, label: 16, color: color },
              { from: 3, to: 8, value: 16, label: 16, color: color },
              { from: 3, to: 9, value: 15, label: 15, color: color },
              { from: 3, to: 10, value: 12, label: 12, color: color },
              { from: 4, to: 5, value: 23, label: 23, color: color },
              { from: 4, to: 6, value: 19, label: 19, color: color },
              { from: 4, to: 7, value: 19, label: 19, color: color },
              { from: 4, to: 8, value: 20, label: 10, color: color },
              { from: 4, to: 9, value: 19, label: 19, color: color },
              { from: 4, to: 10, value: 6, label: 6, color: color },
              { from: 5, to: 6, value: 18, label: 18, color: color },
              { from: 5, to: 7, value: 20, label: 20, color: color },
              { from: 5, to: 8, value: 18, label: 18, color: color },
              { from: 5, to: 9, value: 18, label: 18, color: color },
              { from: 5, to: 10, value: 8, label: 8, color: color },
              { from: 6, to: 7, value: 18, label: 18, color: color },
              { from: 6, to: 8, value: 14, label: 14, color: color },
              { from: 6, to: 9, value: 16, label: 16, color: color },
              { from: 6, to: 10, value: 9, label: 9, color: color },
              { from: 7, to: 8, value: 14, label: 14, color: color },
              { from: 7, to: 9, value: 15, label: 15, color: color },
              { from: 7, to: 10, value: 7, label: 15, color: color },
              { from: 8, to: 9, value: 14, label: 14, color: color },
              { from: 8, to: 10, value: 7, label: 7, color: color },
              { from: 9, to: 10, value: 7, label: 7, color: color }
            ];

            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {};
            network = new vis.Network(container, data, options);
        }
  </script>
</head>

<body onload="draw()">
    <div id="mynetwork">
        <div class="vis network-frame" tabindex="900" style="position: relative; overflow: hidden; -webkit-user-select: none; touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
            <canvas width="600" height="600" style="position: relative; -webkit-user-select: none; touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"></canvas>
        </div>
    </div>
    <p>
        Icons: <a href="http://www.deleket.com/" target="_blank" rel="noreferrer">Scrap Icons by Deleket</a>
    </p>

    <div id="info"></div>


</body>
</html>
